<!DOCTYPE html>
<!-- 引入thymeleaf标签，指定前缀 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>返乡信息</title>
    <link th:href="@{/css/style.css}" href="../static/css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="card">
<!--        <h1 class="title">园区门禁管理系统</h1>-->
        <form class="center" method="post" action="/index" th:action="@{/index}">
            <input type="hidden" name="pageNo" value="1" />
<!--            <label>-->
<!--                <select class="input" id="buidingId" name="buidingId">-->
<!--                    <option value="0">——请选择——</option>-->
<!--                    &lt;!&ndash; <option th:selected="${buiding.id eq buidingId}" th:each="buiding : ${buidings}" th:value="${buiding.id}" th:text="${buiding.name}">楼宇</option> &ndash;&gt;-->
<!--                </select>-->
<!--            </label>-->
           返回日期<input type="text" name="returnData">
            <button class="button" type="submit">查询</button>
            <button class="button right green" type="button" th:onclick="toAdd()">添加</button>
        </form>
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th>姓名</th>
                <th>身份证</th>
                <th>电话</th>
                <th>出发城市</th>
                <th>返乡日期</th>
                <th>是否访谈</th>
                <th>创建日期</th>
                <th>操作</th>
            </tr>
<!--            th:if="${pages.pages ne 0}"-->
            <tr  th:each="returnPerson : ${pages.records}">
                <td th:text="${returnPerson.personName}">姓名</td>
                <td th:text="${returnPerson.personId}">身份证</td>
                <td th:text="${returnPerson.personPhone}">电话</td>
                <td th:text="${returnPerson.sendCity}">出发城市</td>
                <td th:text="${#dates.format(returnPerson.returnData, 'yyyy-MM-dd')}">返乡日期</td>
                <td><b th:id="|status_${returnPerson.id}|" th:text="${returnPerson.interviewStatus=='y'? '是' : '否'}" th:style="'color:'+${returnPerson.interviewStatus=='y' ? '#16b777' : '#dc143c'}+';'">是否访谈</b></td>
                <td th:text="${#dates.format(returnPerson.createDate, 'yyyy-MM-dd')}">创建日期</td>
                <td>&nbsp;<a href="#" th:onclick="|toUpd(${returnPerson.id})|">修改</a>&nbsp;<a href="#" th:onclick="|doDel(this,${returnPerson.id})|">删除</a></td>
            </tr>
<!--            <tr th:if="${pages.pages eq 0}">-->
<!--                <td class="center text-hint" colspan="7">无数据</td>-->
<!--            </tr>-->
        </table>
        <div class="page" th:if="${pages.pages ne 0}">
            <ul>
                <li>
                    <a href="#" th:onclick="'javascript:pageTo(document.forms[0],1);'">首页</a>
                </li>
                <li>
                    <a href="#" th:onclick="'javascript:pageTo(document.forms[0],'+${pages.current - 1}+');'">上一页</a>
                </li>
                <li th:if="${pages.pages ne 0}" th:each="index : ${#numbers.sequence(1, pages.pages)}">
                    <a href="#" th:onclick="'javascript:pageTo(document.forms[0],'+${index}+');'" th:text="${index}">1</a>
                </li>
                <li>
                    <a href="#" th:onclick="'javascript:pageTo(document.forms[0],'+${pages.current lt pages.pages ? (pages.current + 1) : pages.pages}+');'">下一页</a>
                </li>
                <li>
                    <a href="#" th:onclick="'javascript:pageTo(document.forms[0],'+${pages.pages }+');'">最后一页</a>
                </li>
                <li>
                    <span class="text-a" th:text="'第'+${pages.current}+'页 / 共'+${pages.pages}+'页'">第1页/共2页</span>
                </li>
            </ul>
        </div>
    </div>
</body>

<script type="text/javascript" th:src="@{/js/jquery-3.7.0.min.js}"></script>
<script th:inline="javascript">
    // 获取项目路径
    /*<![CDATA[*/

    var ctxPath = /*[[@{/}]]*/ '';

    /*]]>*/

    // 工厂函数（页面加载时执行）
    $(function () {
        // 设置隔行变色
        $("tr:even").css("background-color", "#fcfcfc");
        // 设置首行变色（放在隔行变色后面）
        $("tr:first").css("background-color", "#eeeeee");

        // 选择的楼宇ID
        var buidingId = `[[${buidingId}]]`; // Thymeleaf内联方式获取作用域中的值
        // Ajax异步获取楼宇数据填充下拉列表
        $.ajax({
            type: 'GET',
            url: ctxPath + 'buiding',
            dataType: 'JSON',
            success: function (data) {
                // alert(JSON.stringify(data)); // {"result":[{},{}]}
                if (data.result != null) { // 获取成功，更新下拉列表
                    // <option th:selected="${buiding.id eq buidingId}" th:each="buiding : ${buidings}" th:value="${buiding.id}" th:text="${buiding.name}">楼宇</option>

                    // 获得要操作的下拉框
                    var buidingIdSelect = $('#buidingId');
                    // 定义选项模板
                    var option_temp = `<option selected value="$id">$name</option>`;
                    // 取出数据循环，使用模板拼接格式
                    $(data.result).each(function () {
                        var option_i = option_temp.replaceAll('$id', this.id).replaceAll('$name', this.name); // 模板填值
                        if (this.id != buidingId) { // 选中下拉选项
                            option_i = option_i.replaceAll('selected', ''); // 移除非选中项
                        }
                        buidingIdSelect.append(option_i); // 给下拉框填充选项
                    });
                }
            }
        });
    });

    // 分页跳转
    function pageTo(frm, num) {
        frm.pageNo.value = (num < 0 ? 1 : num);
        frm.submit();
    }

    // 跳转到添加页面
    function toAdd() {
        location.href = "add";
    }

    // 跳转到添加页面
    function toUpd(id) {
        location.href = "upd/" + id;
    }

    // 执行修改状态操作
    function doUpd(obj, id) {
        var status = $(obj).attr("status");
        var tis = status == 1 ? '停用' : '启用';
        if (confirm('你确认' + tis + '该设备？')) {
            $.ajax({
                type: 'POST',
                url: ctxPath + 'upd',
                data: {
                    'id': id,
                    'status': (status == 1 ? 0 : 1)
                },
                dataType: 'JSON',
                success: function (data) {
                    // alert(JSON.stringify(data)); // {"result":"true"}
                    if (data.result == 'true') { // 修改成功，更新行显示
                        $(obj).attr('status', (status == 1 ? '0' : '1')).html(status == 1 ? '启用' : '停用');
                        $('#status_' + id).css('color', (status == 0 ? '#16b777' : '#dc143c')).html(tis);
                    }
                },
                error: function (data) {
                    alert("对不起，修改失败！");
                }
            });
        }
    }

    // 执行删除操作
    function doDel(obj, id) {
        if (confirm('你确定需要删除该设备吗？')) {
            $.ajax({
                type: 'POST',
                url: ctxPath + 'del',
                data: {
                    'id': id,
                },
                dataType: 'JSON',
                success: function (data) {
                    // alert(JSON.stringify(data)); // {"result":"true"}
                    if (data.result === 'true') { // 删除成功：移除行（或刷新）
                        alert('删除成功！');
                        // $(obj).parents("tr").remove();
                        // location.href = ctxPath + 'index';
                        location.reload();
                    }
                },
                error: function (data) {
                    alert("对不起，删除失败！");
                }
            });
        }
    }
</script>
</html>